import React from 'react';
import { Icon } from 'antd-mobile';
import styles from './jobConsult.css';

const imgURL = require('../../../../../../icons/personal/default-avatar.jpg')

const JobConsult = ({
  titleName='',
  jobConsults=[],
  onTotal
}) => {

  // console.log('jobConsults', JSON.stringify(jobConsults));
  const timeFormat = (time) => {
    if(time){
      return time.split(' ')[0];
    }
  }

  return(
    <div className={styles.content}>

      <div className={styles.popups}>
        <div className={styles.label}>
          {titleName}
        </div>
        <div className={styles.display} onClick={()=>onTotal()}>
          查看全部
        </div>
      </div>
      <div className={styles.consultList}>

        {

          jobConsults && jobConsults.length > 0 ? (
            jobConsults.map((item,index) => {
              return (
                <div key={index} className={styles.consultItem}>
                  <img src={item.profile.avatar ? item.profile.avatar : imgURL} />
                  <div className={styles.rightView}>
                    <div className={styles.name}>
                      <span>{item.profile.name}</span>
                      <span style={{fontSize:'0.85em'}}>{timeFormat(item.createdDate)}</span>
                    </div>
                    <div className={styles.problem}>{item.askContent}</div>
                    {item.answerContent ? (
                      <div className={styles.reply}>
                        <div className={styles.replyLink}>商家 回复:</div>
                        <div className={styles.answerContent}>{item.answerContent}</div>
                      </div>
                    ):''}

                    {/* {
                      item.reply.map((replyItem,i) => {
                        return (
                          <div className={styles.reply} key={i}>
                            <span className={styles.replyLink}>商家 回复:</span>
                            <span>{replyItem.content}</span>
                          </div>
                        )
                      })
                    } */}

                  </div>
                </div>
              )
            })
          ) : (
            <div className={styles.jobConsultIsNull}>暂无咨询</div>
          )

        }

      </div>


    </div>
  )
}

export default JobConsult;
